<template>
  <div class="Firstregis_container">
    <!-- 搜索条件 -->
    <div class="nav">
      <Row>
        <Col span="24">
            <h2 class="addcustomergroup_title">首次注册来源</h2>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <div class="Firstregis">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
              <Row>
                <Col span="6">
                  <FormItem label="选择颗粒度：">
                    <Row>
                      <Col span="5">                                    
                          <RadioGroup type="button" v-model="formValidate.time_type"  class="buttongroup">
                            <Radio label="1" >日</Radio>
                            <Radio label="2" >周</Radio>
                            <Radio label="3" >月</Radio>
                            <Radio label="4" >年</Radio>
                          </RadioGroup>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="选择时间：">
                    <Row>
                      <Col span="5">
                        <FormItem prop="start_time" :label-width="120">
                          <DatePicker
                            type="datetime"
                            placeholder="请选择日期" format="yyyy-MM-dd"
                            :value="formValidate.start_time"
                            @on-change="formValidate.start_time=$event"
                            style="width:9vw;"
                          ></DatePicker>
                        </FormItem>
                      </Col>
                    <Col span="7" style="text-align: center" push="9">~</Col>
                      <Col span="6" push="8">
                        <FormItem prop="end_time" :label-width="120">
                          <DatePicker
                            type="datetime"
                            placeholder="请选择日期"
                            :value="formValidate.end_time"
                            @on-change="formValidate.end_time=$event"
                            format="yyyy-MM-dd"
                            style="width:9vw;"
                          ></DatePicker>
                        </FormItem>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
                <Col span="8" push="5">                
                  <FormItem label="选择会员渠道：" prop="channel_id" :label-width="100">
                    <Select v-model="formValidate.channel_id" placeholder="请选择.."
                      style="width:11vw;margin-left:-10px;">
                      <Option value="0">全部</Option>
                      <Option v-for="item in channels"
                        :value="item.id" :key="item.value" >{{ item.name }}</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row style="margin-top:2vh;">
                <Col span="8">
                  <Button type="success" style="width:10vw;" @click="getRegisterMemberReportList">查询</Button>
                </Col>
                <Col span="3" push="11">
                  <Button type="success" style="width:10vw;" @click="exportData()">下载</Button>
                </Col>
              </Row>
            </Form>
          </div>
        </Col>
      </Row>
    </div>
    <div class="chart_container" v-if="showchart == true">
      <div id="firstregis" v-if="showchart == true"></div>
    </div>
    <div class="table_box">
      <Table :columns="columns" :data="formList" border ref="table" style="width:100%;"> </Table>
    </div>
  </div>
</template>
<script>
import {
  getRegisterMemberReport,
  exportRegisterMemberReport,
  fetchChannelList
} from "@/api/report";


import echarts from "echarts";
import { error } from "util";
export default {
  name: "Firstregis",
  data() {
    return {
      showchart:false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      reportList: [],
      timeList: [],
      formList: [],
      nameList: [],
      channels: [],

      vitalist:[],    //维他Vita互动平台
      vitasoylist:[],  // 维他奶Vitasoy互动平台
      wxlist:[], // 维他奶微信会员通
      routinelist:[], // 维他奶小程序

      endtime:'',
      starttime:'',
      formValidate: {
        // 查询参数
        start_time: "",
        end_time: "",
        channel_id: "0",
        store: "",
        time_type: "1"
      },
      ruleValidate: {
        // 查询验证
        start_time: [
          {
            required: true,
            type: "date",
            message: "请选择时间",
            trigger: "change"
          }
        ],
        end_time: [
          {
            required: true,
            type: "date",
            message: "请选择时间",
            trigger: "change"
          }
        ],
    
      },
      columns: [
        {
          title: "开始截止时间",
          minWidth:150,
          key: "date_str",
          align: "center"
        },
        {
          title: "区分",
          key: "type",
          minWidth:150,
          align: "center",
          width:150
        },
        {
          title: "总数",
          key: "total",
          minWidth:150,
          align: "center",
          width:150
        },
        {
          title: "维他Vita互动平台",
          key: "wx_w",
          align: "center",
          //width:150
          minWidth:150,
        },
        {
          title: "维他奶Vitasoy互动平台",
          key: "wx_m",
          align: "center",
          minWidth:150,
        },
        {
          title: "维他奶微信会员通",
          key: "wmc",
          align: "center",
          minWidth:150,

        },
        {
          title: "维他奶小程序",
          key: "tmall_w",
          align: "center",
          minWidth:150,
        },
        /*{
          title: "微信会员通",
          key: "tmall_w",
          align: "center",
          minWidth:150,
        },
        {
          title: "小程序",
          key: "tmall_m",
          align: "center",
        },*/
      ]
    };
  },
  created() {
    this.channelList();
  },
  methods: {
    //渠道
    channelList() {
      fetchChannelList().then(res => {
        if (res.data.code == 200) {
          if (res.data.data) {
            this.channels = res.data.data;
          }
        } else {
          this.$Message.error("操作失败");
        }
      });
    },
    exportData() {
      this.$refs.table.exportCsv({
          filename: "首次注册报表"
        });
    },
   
    getRegisterMemberReportList() {
      this.TableLoading = true;
      this.load = true;
      if (this.formValidate.time_type == ''){
        this.$Message.error("请选择颗粒度");
        return;
      }
      if(this.formValidate.start_time > this.formValidate.end_time){
        this.$Message.error('开始时间必须小于结束时间');
        return;
      }
      if(this.formValidate.start_time == ""){
        this.$Message.error('请选择时间段');
        return;
      }
      if(this.formValidate.end_time == ""){
        this.$Message.error('请选择时间段');
        return;
      }
      var reqParams = {
        time_type: this.formValidate.time_type,
        start_time: this.formValidate.start_time,
        end_time: this.formValidate.end_time,
        channel_id: this.formValidate.channel_id
      };
      if(this.formValidate.channel_id == 0){
        reqParams.channel_id = '';
      }
      getRegisterMemberReport(reqParams).then(res => {
          this.TableLoading = false;
          if (res.data.code == 200) {
            this.reportList = res.data.result.reportLists;
            // for(let i = 0; i<res.data.result.formList.length;i++){
            //     this.vitalist = res.data.result.formList[i].tmall_b;
            //     this.vitasoylist = res.data.result.formList[i].tmall_m;
            //     this.wxlist = res.data.result.formList[i].tmall_w;
            //     this.routinelist = res.data.result.formList[i].wmc;
            // }
            

            this.timeList = res.data.result.timeList;
            this.formList = res.data.result.formList;
            this.nameList = res.data.result.nameList;
            this.showchart = true;
            setTimeout(()=>{
              this.drawCharts();
            },500)
          }else if(res.data.code == 401){
            //this.$Message.success('查询成功！');
          }
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },
    fetchData() {
      this.getRegisterMemberReportList();
    },
    // 折线图
    drawUserstatistics() {
      echarts.dispose(document.getElementById("firstregis"));
      this.firstregis = echarts.init(document.getElementById("firstregis"));
      this.firstregis.setOption({
         animationDelay:function(idx){
            return idx * 100;
        },
        grid:{
          top:40
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              },
              
          },
        },
        legend: {
            top:'95%',
            data:this.nameList,
            type:'scroll',
        },
        axisPointer:{
         
        },
        xAxis: [
            {
              type: 'category',
              data: this.timeList,
              axisPointer: {
                  type: 'shadow'
              },
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '',
                min: 0,
                interval: 10000,
                axisLabel: {
                    formatter: '{value} %'
                },
                axisLine:{
                  show:true,
                },
                axisTick:{
                  show:false,
                },
                axisLabel:{
                  formatter: function(value){
                    return value/10000 + '万'
                },
            }
            },
            {
                type: 'value',
                name: '',
                min: 0,
                interval: 50,
                axisLabel: {
                    formatter: '{value} %'
                },
                axisLine:{
                  show:false
                },
                axisTick:{
                  show:false,
                }
            }
        ],
         series: this.reportList
        // series:[
        //   {
        //     name:'维他Vita互动平台',
        //     type:'bar',
        //     stack: '堆叠',
        //     barWidth:'70px',
        //     data: this.vitalist, 
        //   },
        //   {
        //     name:'维他奶Vitasoy互动平台',
        //     type:'bar',
        //     stack: '堆叠',
        //     barWidth:'70',
        //     data: this.vitasoylist,
        //   },
        //   {
        //     name:'维他奶微信会员通',
        //     type:'bar',
        //     stack: '堆叠',
        //     barWidth:'70',
        //     data: this.wxlist, 
        //   },
        //   {
        //     name:'维他奶小程序',
        //     type:'bar',
        //     stack: '堆叠',
        //     barWidth:'70',
        //     data: this.routinelist, 
        //   },
        // ]
      });
    },
    drawCharts(){
      this.drawUserstatistics();
    },
    getNowFormatDate() {
      var date = moment().format("YYYY-MM-DD"); //当前时间
      var CurDate = moment().subtract(2, "days").format("YYYY-MM-DD"); //当前时间的前2天时间
      var startDate = moment().subtract(5, "days").format("YYYY-MM-DD"); //当前时间的前5天时间
      this.formValidate.start_time = startDate;
      this.formValidate.end_time = CurDate;
    }, 
  },
  mounted() {
    this.getNowFormatDate();
    var time = setInterval(() => {
      this.getNowFormatDate();
    }, 86400000);
    this.getRegisterMemberReportList();
  },
}
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.Firstregis_container {
  @include container_global;
  background-color: #fff;
  .active {
    color: #68b6ff;
    border: 1px solid #8fc3ff;
    background-color: #e6f2ff;
  }
  .nav {
    height: 7vh;
    width: 100%;
    line-height: 35px;
    background-color: #fff;
    position: relative;
    .addcustomergroup_title {
      height: 7vh;
      font-weight: bolder;
    }
    .buttongroup {
      display: flex;
      justify-content: flex-start;
    }
  }
  .chart_container { // 图表容器
    width: 100%;
    min-height: 60vh;
    margin-top: 20vh;
    padding-bottom: 2vh;
    border: 1px solid #e6f2ff;
    #firstregis {
      width: 100%;
      height: 60vh;
    }
  }
  .table_box {
    margin-top: 2vh;
    width: 100%;
  }
  .page {
    @include page_global;
  }
}
</style>
